import React, { lazy, Suspense } from 'react'
//这种方式组件导入，会直接渲染
// import Book from './Book/Book'
import Index from './Index/Index'
// import BookDetail from './BookDetail/BookDetail'
import './App.css'
//导入包里面的组件
import { useRoutes } from 'react-router-dom'

//使用懒加载的方式导入组件，只有真正访问了这个路由规则，才会加载对应的组件
let Book = lazy(() => import('./Book/Book'));
let BookDetail = lazy(() => import('./BookDetail/BookDetail'));


function IsLoding() {
  return <div>loading....</div>
}

export default function App() {
  //当项目中出现了很多的路由配置，则我们一般会使用useRoutes这样的钩子单独进行配置路由表，而很少会使用组件嵌套的方式
  let routes = useRoutes([
    //数组中的元素是路由的配置对象
    {
      path: '/',
      element: <Index />
    },
    {
      path: '/books',
      element: <Suspense fallback={<IsLoding />}>
        <Book />
      </Suspense>
    },
    {
      path: '/book/:id',
      element: <Suspense fallback={<IsLoding />}>
        <BookDetail />
      </Suspense>
    },
    {
      path: '/bookOne',
      element: <Suspense fallback={<IsLoding />}>
        <BookDetail />
      </Suspense>
    }
  ]);
  return (
    <div>
      {routes}
    </div>
  )
}
